<template>
  <view class="post-detail">
    <!-- 帖子标题 -->
    <view class="post-title">
      <text class="title">{{ post.zuopinmingcheng }}</text>
      <view class="info">
        <text class="author">摄影师: {{ post.sheyingshixingming }}</text>
        <!-- <text class="time">{{ post.createTime }}</text> -->
      </view>
    </view>

    <!-- 帖子内容 -->
    <view class="post-content">
      <image
        :src="`http://localhost:8888${post.tupian}`"
        class="post-image"
        mode="aspectFill"
      ></image>
      <text class="content">{{ post.beizhu }}</text>
    </view>

    <!-- 评论部分 -->
    <view class="comments">
      <view class="comment-title">评论区</view>
      <view v-for="(comment, index) in comments" :key="index" class="comment">
        <view class="comment-author">{{ comment.pinglunren }}</view>
        <view class="comment-time">{{ comment.createTime }}</view>
        <view class="comment-content">{{ comment.pinglunneirong }}</view>

        <!-- 回复部分 -->
        <view v-if="comment.huifu" class="reply">
          <text class="reply-author">作者:</text>
          <text class="reply-content">{{ comment.huifu }}</text>
        </view>
      </view>

      <!-- 输入框和提交评论按钮 -->
      <view class="comment-input">
        <input
          v-model="newComment"
          placeholder="请输入评论..."
          class="comment-text"
        />
        <button @click="submitComment" class="submit-btn">提交评论</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  jiaoshi,
  pinglunList,
  addpinglun,
} from '@/request/API/xinwentongzhi/index'
export default {
  data() {
    return {
      // 从上个页面传递过来的帖子数据
      post: {},
      obj: {},
      qid: '',
      // 假数据: 评论区数据
      comments: [],
      // 新评论的内容
      newComment: '',
    }
  },
  onLoad(options) {
    // 获取上一个页面传递的数据
    if (options.id) {
      console.log(options.id)
      this.qid = options.id
      this.jiaoshi(options.id)
      this.pinglunList(options.id)
      this.obj = uni.getStorageSync('user')
    }
  },
  methods: {
    jiaoshi(name) {
      jiaoshi({
        id: name,
      }).then((res) => {
        this.post = res.data.list[0]
      })
    },
    pinglunList(name) {
      pinglunList({
        shujuid: this.qid,
      }).then((res) => {
        this.comments = res.data.list
      })
    },
    // 提交评论
    submitComment() {
      if (this.newComment.trim() === '') {
        uni.showToast({
          title: '评论不能为空',
          icon: 'none',
        })
        return
      }
      addpinglun({
        pinglunren: this.obj.yonghuxingming,
        pinglunneirong: this.newComment,
        shujuid: this.qid,
      }).then((res) => {
        this.pinglunList(this.qid)
        this.newComment = '' // 清空输入框
      })
      // const newCommentObj = {
      // 	author: '用户', // 假设是当前登录的用户
      // 	time: this.formatDate(new Date()),
      // 	content: this.newComment,
      // 	replies: []
      // };

      // 将新评论添加到评论区
      // this.comments.push(newCommentObj);
    },

    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
  },
}
</script>

<style scoped>
.post-detail {
  font-family: 'Helvetica', sans-serif;
  background-color: #f5f5f5;
  padding: 1rpx;
}

.post-title {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.author,
.time {
  font-size: 14px;
  color: #888;
}

.post-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  /* 增加评论区和帖子之间的距离 */
}

.post-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.content {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* 评论区部分 */
.comments {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

.comment-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.comment {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.comment-author {
  font-weight: bold;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #aaa;
  margin-left: 10px;
}

.comment-content {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.reply {
  margin-left: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: #777;
}

.reply-author {
  font-weight: bold;
  color: #333;
}

.reply-content {
  margin-left: 5px;
  color: #555;
}

/* 输入框部分 */
.comment-input {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  margin-top: 30px;
}

.comment-text {
  font-size: 16px;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  color: #333;
}

.submit-btn {
  background-color: #4caf50;
  margin: 0;
  color: #fff;
  font-size: 16px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #45a049;
}
</style>
